<template>
	<view class="detail-contanier" v-if="isLoading">
		<!-- 轮播 -->
		<view class="swiper">
			<u-swiper :list="swiper.list" :height="swiper.height" radius="0" :circular="true" keyName="url"
				@change="e => swiper.currentNum = e.current" :autoplay="true" indicatorStyle="right: 20px"
				imgMode="aspectFit">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ swiper.currentNum + 1 }}/{{swiper.list.length }}</text>
				</view>
			</u-swiper>
		</view>
		<!-- 商品价格和信息 -->
		<view class="buy-area">
			<view class="price-wrap flex-sb">
				<view class="price">¥<text class="price-num">{{goods.goodsPriceMin}}~{{goods.goodsPriceMax}}</text>
					<text class="origina-price">¥{{goods.linePriceMax}}</text>
				</view>
				<view class="Sold">已售 {{(goods.salesActual+goods.salesInitial)}} 件</view>
			</view>
			<view class="shop-title-share">
				<text class="title">{{goods.goodsName}}</text>
				<view class="share">
					<!-- <button class=" btn-normal" id="shareBtn" open-type="share"> -->
						<u-icon name="share-square" size="28" label="分享" labelPos='bottom'
							@click="ShareAppMessage"></u-icon>
					<!-- </button> -->
				</view>
			</view>
			<view class="shop-title-desc">{{goods.sellingPoint}}</view>
		</view>
		<!-- 商品描述 -->
		<view class="buy-shop-desc">
			<view class="desc-title">商品描述</view>
			<view class="desc-content">
				<u-parse :content="goods.content"></u-parse>
			</view>
		</view>
		<!-- 底部选项卡 -->
		<view class="footer-fixed">
			<view class="footer-container">
				<!-- 导航图标 -->
				<view class="foo-item-fast">
					<!-- 首页 -->
					<view class="fast-item" @click="onTargetHome">
						<!-- <u-icon name="home" color="#000" size="28"></u-icon> -->
						<unt-icon name="icon-wap-home-o" color="#000" size="26"></unt-icon>
						<text class="fast-text">首页</text>
					</view>
					<!-- 客服 (仅微信小程序端显示) -->
					<!-- #ifdef MP-WEIXIN -->
					<button class="btn-normal fast-item" open-type="contact">
						<unt-icon name="icon-kefu" color="#000" size="26"></unt-icon>
						<!-- <u-icon name="kefu-ermai" color="#000" size="26"></u-icon> -->
						<text class="fast-text">客服</text>
					</button>
					<!-- #endif -->
					<!-- 购物车 -->
					<view class="fast-item fast-item--cart" @click="handleCart">
						<!-- <view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">
							{{ cartTotal > 99 ? '99+' : cartTotal }}
						</view> -->
						<unt-icon name="icon-cart" color="#000" size="26"></unt-icon>
						<text class="fast-text">购物车</text>
					</view>
				</view>
				<!-- 操作按钮 -->
				<view class="foo-item-btn">
					<view class="btn-wrapper">
						<view class="btn-item btn-item-deputy" @click="handleTihuoMessage(1)">
							<text>加入购物车</text>
						</view>
						<view class="btn-item btn-item-main" @click="handleTihuoMessage(2)">
							<text>立即购买</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品规格 -->
		<unt-goods-sku v-if="goods.sku.length>0" :typePay="typePay" :show="skuShow" :goods="goods"
			@close="skuShow=false"></unt-goods-sku>

		<!-- 返回顶部 strat -->
		<unt-back-top :scrollTop="scrollTop"></unt-back-top>
		<!-- 返回顶部 end-->
		<share-poster ref="shares" :goods="goods" />
	</view>
</template>

<script>
	import sharePoster from "../../component/sharePoster/sharePoster.vue"
	import * as Cart from "@/api/cart/index.js"
	import * as Goods from '@/api/goods/index.js'
	import Config from '@/core/config'
	export default {
		components:{
			sharePoster
		},
		data() {
			return {
				scrollTop: 0,
				skuShow: false,
				isLoading: false,
				swiper: {
					height: 350,
					list: [],
					currentNum: 0
				},
				options: {},
				goods: {},
				typePay: 1
			}
		},
		onLoad(options) {
			this.options = options;
			this.getGoodsDetails(options.id);
		},
		methods: {
			handleTihuoMessage(val) {
				const app=this;
				wx.requestSubscribeMessage({
					tmplIds: ['VJTpgE0_frS82VntlyqKxSRjKKEmyXuSOfRoU_p5E6E'],
					success(res) {
						console.log('requestSubscribeMessage success', res);
					},
					fail(res) {
						console.log('requestSubscribeMessage fail', res);
					},complete() {
						app.addCartGoods(val);
					}
				})
			},
			addCartGoods(num) {
				this.typePay = num;
				const g = this.goods;
				const data = {
					goodsId: g.goodsId,
					goodsNum: 1
				};
				if (g.sku.length > 0) {
					this.skuShow = true;
				} else if (num == 2) {
					this.$unts.navTo('pages_moon/handCheckout/handCheckout', data)
				} else {
					Cart.add(data).then(res => {
						this.$unts.toast(res.message);
					}).catch()
				}
			},
			getGoodsDetails(ids) {
				Goods.details({
					id: ids
				}).then(res => {
					this.goods = res.data;
					this.generateSwiper(res.data.goodsImageList);
					this.jsImageWidth(res.data.goodsImageList[0].url);
					this.isLoading = true;
				}).catch()
			},
			generateSwiper(data) {
				const list = []
				data.forEach(item => {
					if (item.type === 30) {
						list.unshift({
							...item,
							type: 'video'
						})
					} else {
						list.push({
							...item,
							type: 'image'
						})
					}
				});
				this.swiper.list = list;
			},
			onTargetHome() {
				this.$unts.navTo("pages/index/index")
			},
			handleCart() {
				this.$unts.navTo("pages/cart/cart")
			},
			skuNumChange(index) {

			},
			jsImageWidth(src) {
				const app = this;
				uni.getImageInfo({
					src,
					success(r) {
						const hieght = uni.upx2px(750) / r.width * r.height;
						app.swiper.height = hieght;
					}
				})
			},
			ShareAppMessage(){
				this.$refs.shares.shows();
			}
		},
		/**
		 * 设置分享内容
		 */
		onShareAppMessage() {
			const app = this
			return {
				title: app.goods.goodsName,
				path: '/pages_moon/goods/detail/detail?id=' + app.goods.goodsId
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			return {
				title: app.goods.goodsName,
				path: '/pages_moon/goods/detail/detail?id=' + app.goods.goodsId
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>
<style lang="scss">
	page {
		background: #fafafa;
	}

	.buy-shop-desc image,
	.buy-shop-desc img {
		vertical-align: bottom;
	}
	.buy-shop-desc video {
		width: 100% !important;
	}

	.buy-shop-desc>rich-text:empty {
		display: none;
	}
</style>
<style lang="scss" scoped>
	@import "detail.scss";
</style>